<template>
    <el-dialog :visible="visible" @close="handleClose" @before-close="handleBeforeClose" title="用户信息" width="600px"
        top="10px" center class="resume-dialog">
        <div class="resume-card">
            <!-- 简历头部 -->
            <div class="resume-header" :class="getResumeTypeClass(user.stype)">
                <img :src="user.avatar || defaultAvatar" class="resume-avatar">
                <div class="resume-info">
                    <h3 class="resume-name">{{ user.name }}</h3>
                    <p class="resume-title">{{ getUserTypeText(user.stype) }}</p>
                </div>
            </div>

            <!-- 简历主体 -->
            <div class="resume-body">
                <!-- 求职者简历 -->
                <div v-if="user.stype === 'seeker'" class="resume-section">
                    <div v-if="userInfo" class="admin-details">
                        <div class="section-title">
                            <i class="el-icon-user"></i> 基本信息
                        </div>
                        <div class="info-row">
                            <span class="info-label">年龄:</span>
                            <span>{{ userInfo.age || '-' }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">性别:</span>
                            <span>{{ userInfo.gender || '-' }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">出生日期:</span>
                            <span>{{ formatDate(userInfo.birthDate) || '-' }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">联系电话:</span>
                            <span>{{ userInfo.phone || '-' }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">所在地:</span>
                            <span>{{ userInfo.location || '-' }}</span>
                        </div>

                        <div class="section-title mt-20">
                            <i class="el-icon-s-claim"></i> 教育背景
                        </div>
                        <div class="info-row">
                            <span class="info-label">学历:</span>
                            <span>{{ getEducationText(userInfo.education) || '-' }}</span>
                        </div>

                        <div class="section-title mt-20">
                            <i class="el-icon-s-flag"></i> 求职意向
                        </div>
                        <div class="info-row">
                            <span class="info-label">期望行业:</span>
                            <span>{{ userInfo.expectedIndustry || '-' }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">期望职位:</span>
                            <span>{{ userInfo.expectedPosition || '-' }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">期望薪资:</span>
                            <span>{{ userInfo.expectedSalary ? userInfo.expectedSalary + '元/月' : '-' }}</span>
                        </div>

                        <div class="section-title mt-20">
                            <i class="el-icon-s-claim"></i> 个人优势
                        </div>
                        <div class="info-row">
                            <span>{{ userInfo.personalAdvantages || '-' }}</span>
                        </div>
                    </div>
                </div>

                <!-- 企业用户简历 -->
                <div v-if="user.stype === 'recruiter'" class="resume-section">
                    <div v-if="userInfo" class="admin-details">
                        <div class="section-title">
                            <i class="el-icon-s-claim"></i> 基本信息
                        </div>
                        <div class="info-row">
                            <span class="info-label">姓名:</span>
                            <span>{{ user.name || '-' }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">年龄:</span>
                            <span>{{ userInfo.age || '-' }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">性别:</span>
                            <span>{{ userInfo.gender || '-' }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">联系电话:</span>
                            <span>{{ userInfo.phone || '-' }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">企业岗位:</span>
                            <span>{{ getPositionTypeText(userInfo.type) || '-' }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">所在地:</span>
                            <span>{{ userInfo.location || '-' }}</span>
                        </div>

                        <div class="section-title mt-20">
                            <i class="el-icon-office-building"></i> 企业信息
                        </div>
                        <div class="info-row">
                            <span class="info-label">企业名称:</span>
                            <span>{{ userInfo.companyName || '-' }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">企业所在地:</span>
                            <span>{{ userInfo.companyLocation || '-' }}</span>
                        </div>
                    </div>
                </div>

                <!-- 管理员简历 -->
                <div v-if="user.stype === 'admin'" class="resume-section">
                    <div v-if="userInfo" class="admin-details">
                        <div class="section-title">
                            <i class="el-icon-user"></i> 基本信息
                        </div>
                        <div class="info-row">
                            <span class="info-label">姓名:</span>
                            <span>{{ userInfo.name || '-' }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">年龄:</span>
                            <span>{{ userInfo.age || '-' }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">性别:</span>
                            <span>{{ userInfo.gender || '-' }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">联系电话:</span>
                            <span>{{ userInfo.phone || '-' }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">所在地:</span>
                            <span>{{ userInfo.location || '-' }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">出生日期:</span>
                            <span>{{ formatDate(userInfo.birthDate) || '-' }}</span>
                        </div>

                        <div class="section-title mt-20">
                            <i class="el-icon-s-management"></i> 管理信息
                        </div>
                        <div class="info-row">
                            <span class="info-label">管理员类型:</span>
                            <span>{{ getManagerTypeText(userInfo.managerType) || '-' }}</span>
                        </div>
                        <div v-if="isSuperAdmin" class="info-row">
                            <el-button type="danger" @click="deleteManager(user.userId)">删除管理员</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { deleteManager, getManagerBasicMessage } from '@/util/manager_api/manager'; // 假设存在删除管理员的接口
import { getSeekerBasicMessage } from '@/util/manager_api/seeker';
import { getRecruiterBasicMessage } from '@/util/manager_api/recruiter';
import { mapGetters } from 'vuex';

export default {
    name: "UserResumeDialog",
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        user: {
            type: Object,
            default: () => ({})
        },
        defaultAvatar: {
            type: String,
            default: 'https://picsum.photos/200/200?random=100'
        }
    },
    data() {
        return {
            isDestroying: false,   // 新增状态标记组件销毁中
            userInfo: null,
            loading: false,
        }
    },
    computed: {
        ...mapGetters('manager', ['isSuperAdmin']),
    },
    watch: {
        visible(newVisible) {
            if (newVisible) {
                this.fetchBasicMessage();
            }
        }
    },
    methods: {
        fetchBasicMessage() {
            if (this.user.stype === 'admin') {
                this.fetchManagerBasicMessage();
            } else if (this.user.stype === 'seeker') {
                this.fetchSeekerBasicMessage();
            } else {
                this.fetchRecruiterBasicMessage();
            }
        },
        //获取管理员具体信息
        async fetchManagerBasicMessage() {
            try {
                const params = {
                    userId: Number(this.user.userId),
                };
                const response = await getManagerBasicMessage(params);
                this.userInfo = response.data.data;
            } catch (error) {
                console.error('获取具体信息失败:', error);
            }
        },
        async fetchSeekerBasicMessage() {
            try {
                const params = {
                    userId: Number(this.user.userId),
                };
                const response = await getSeekerBasicMessage(params);
                this.userInfo = response.data.data;
            } catch (error) {
                console.error('获取具体信息失败:', error);
            }
        },
        async fetchRecruiterBasicMessage() {
            try {
                const params = {
                    userId: Number(this.user.userId),
                };
                const response = await getRecruiterBasicMessage(params);
                this.userInfo = response.data.data;
            } catch (error) {
                console.error('获取具体信息失败:', error);
            }
        },
        // 获取用户类型文本
        getUserTypeText(type) {
            const typeMap = {
                'seeker': '求职者',
                'recruiter': '企业用户',
                'admin': '管理员'
            };
            return typeMap[type] || type;
        },
        // 获取简历类型样式类
        getResumeTypeClass(type) {
            const classMap = {
                'seeker': 'seeker',
                'recruiter': 'recruiter',
                'admin': 'admin'
            };
            return classMap[type] || '';
        },
        // 格式化日期
        formatDate(dateString) {
            if (!dateString) return '未提供';
            const date = new Date(dateString);
            return date.toLocaleDateString();
        },
        // 获取教育背景文本
        getEducationText(education) {
            const eduMap = {
                'UNDERGRADUATE': '本科',
                'POSTGRADUATE': '硕士',
                'DOCTOR': '博士',
                'JUNIOR': '专科'
            };
            return eduMap[education] || education;
        },
        // 获取在企岗位类型文本
        getPositionTypeText(type) {
            const typeMap = {
                'BOSS': '老板',
                'MANAGEMENT': '管理层',
                'RECRUITER': '招聘人员'
            };
            return typeMap[type] || type;
        },
        // 获取管理员类型文本
        getManagerTypeText(type) {
            const typeMap = {
                'NORMAL': '普通管理员',
                'SUPER': '超级管理员'
            };
            return typeMap[type] || type;
        },
        async deleteManager(userId) {
            try {
                let deleteUserId = userId
                const response = await deleteManager(deleteUserId);
                if (response.data.code === 201) {
                    this.$store.commit('manager/SET_TOKEN', response.data.data);
                    this.handleClose();
                    this.$emit('refreshUserList'); // 触发刷新列表事件
                } else {
                    this.$message.error(response.data.message || '删除失败');
                }
            } catch (error) {
                console.error('删除管理员失败:', error);
                this.$message.error('管理员删除失败');
            }
        },
        handleBeforeClose(done) {
            // 在对话框关闭前标记销毁状态
            this.isDestroying = true;
            done(); // 调用默认关闭逻辑
        },
        // 关闭对话框
        handleClose() {
            this.isDestroying = true;
            this.$emit('update:visible', false); // 通知父组件更新visible
        }
    }
};
</script>

<style scoped>
.resume-dialog .el-dialog {
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 9999;
    /* 设置较高的层级 */
}

.resume-dialog .el-dialog__header {
    background-color: #fff;
    border-bottom: 1px solid #ebeef5;
    padding: 16px 24px;
    display: flex;
    justify-content: center;
}

.resume-dialog .el-dialog__title {
    color: #304156;
    font-weight: 600;
    font-size: 18px;
}

.resume-card {
    padding: 24px;
    background-color: #fff;
    border-radius: 8px;
}

/* 简历头部 */
.resume-header {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f2f5;
    margin-bottom: 20px;
}

.resume-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-right: 20px;
}

.resume-info h3 {
    font-size: 20px;
    font-weight: 600;
    color: #304156;
    margin-bottom: 6px;
}

.resume-info p {
    font-size: 14px;
    color: #909399;
    margin: 0;
}

/* 求职者简历头部颜色 */
.resume-header.seeker {
    border-color: #67c23a;
    background: linear-gradient(135deg, rgba(103, 194, 58, 0.05), transparent);
}

/* 企业用户简历头部颜色 */
.resume-header.recruiter {
    border-color: #e6a23c;
    background: linear-gradient(135deg, rgba(230, 162, 60, 0.05), transparent);
}

/* 管理员简历头部颜色 */
.resume-header.admin {
    border-color: #909399;
    background: linear-gradient(135deg, rgba(144, 147, 153, 0.05), transparent);
}

/* 简历主体 */
.resume-body {
    color: #606266;
    font-size: 14px;
}

.section-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #304156;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f2f5;
}

.section-title i {
    margin-right: 8px;
    color: #409eff;
}

.info-row {
    display: flex;
    margin-bottom: 12px;
    line-height: 1.5;
}

.info-label {
    flex: 0 0 100px;
    color: #909399;
    font-weight: 500;
}

.mt-20 {
    margin-top: 20px;
}

/* 对话框底部 */
.dialog-footer {
    display: flex;
    justify-content: center;
    padding: 16px 24px;
    border-top: 1px solid #f0f2f5;
}
</style>